<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>
      {{date}}
    </p>
    <p>
      <!-- 原始值 | 过滤器的名字 -->
      {{date | dateString}}
    </p>
    <p>
      <!-- 原始值 | 过滤器的名字 可以传入参数 -->
      年月日：{{date | dateString('YYYY-MM-DD')}}
    </p>
    <p>
      <!-- 原始值 | 过滤器的名字 可以传入参数-->
      时分秒：{{date | dateString('HH:mm:ss')}}
    </p>
  </div>
  <script src="./vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  <script>
    // Vue是函数对象 自定义过滤器
    // Vue.filter('dateString', function (value) {
    //   return moment(value).format('YYYY-MM-DD HH:mm:ss')
    // })
    // 传入格式
    // Vue.filter('dateString', function (value, format) {
    //   // 默认值为YYYY-MM-DD HH:mm:ss
    //   return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
    // })
    // ES6可以定义函数的默认值
    Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {
      // 默认值为YYYY-MM-DD HH:mm:ss
      return moment(value).format(format)
    })
    new Vue({
      el: '#app',
      data: {
        date: new Date()
      }
    })
  </script>
</body>
</html>